import React, { Component } from 'react';
import Inside from '../inside/inside.jsx';
import Brother from '../brother/brother.jsx';
export default class Midde extends Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0,
        }
    }

    // 加一
    add() {
        let count = this.state.count + 1;
        this.setState({
            count: count
        })
    }

    // 减一
    subtraction() {
        let count = this.state.count - 1;
        this.setState({
            count: count
        })
    }

    // 手动输入
    handleInput(e) {
        let count = e.target.value;
        count = count.replace(/^(0+([1-9]\d*|0\.\d+))/, [1])
        this.setState({
            count: count
        })
    }

    render() {
        return (
            <div>
                <p>Middle</p>
                <label htmlFor="middleInput">middle中的input</label>
                <button onClick={() => this.add()}>加</button>
                <input id="middleInput" onChange={(e) => this.handleInput(e)} type="number" value={this.state.count} />
                <button onClick={() => this.subtraction()}>减</button>

                <Brother />
                <Inside count={this.state.count} handleChange={(e) => this.handleInput(e)} inSiderAdd={() => this.add()} inSiderSubtraction={() => this.subtraction()} />
            </div>
        )
    }

}